import { useContext } from 'react';
import './action.css';
import { GameContext } from '../reducer';
interface PlayerActionProps {
    playAction: Action[];
    switchAction: (clickIndex: number) => void;
}
/**
 * @function PlayerAction 玩家执行时间的动作hook
 * @param {PlayerActionProps} props props数据
 * @returns {} 返回一个hook
 */
function PlayerAction (props: PlayerActionProps) {
    const { playAction, switchAction } = props;
    const gameContext = useContext(GameContext);
    const { changeState } = gameContext;
    const { executeStep } = gameContext.gameState;
    /**
     * @function getShowInfo 获取展示信息
     * @param {number} index 当前步数数据下标
     * @returns {string} 展示信息
     */
    function getShowInfo (index: number) {
        if (!index) return 'Go to game start';
        return `Go to move #${index}`;
    }
    /**
     * @function handleClick 处理步骤点击事件
     * @param {number} clickIndex 点击的步骤下标值
     */
    function handleClick (clickIndex: number) {
        changeState({ type: 'changeExecute', payload: { executeStep: clickIndex } });
        switchAction(clickIndex);
    }
    return (
        <div className="action-column">
            {
                playAction.filter((value: Action) => {
                    return value.isShow !== false;
                }).map((value: Action, index: number) => {
                    return <div className="actionInfo" key={`actionInfo-${index}`}>
                        <span className="actionIndex">{index + 1}:</span>
                        <button className={executeStep < index ? 'actionOver' : 'actionUsed'} onClick={() => handleClick(index)}>{getShowInfo(index)}</button>
                    </div>;
                })
            }
        </div>
    );
}
export default PlayerAction;
